<template>
    <view v-if="visible" class="chat-notification" @click="onClick">
        <view class="notification-content">
            <view class="avatar">
                <image :src="avatar" mode="aspectFill"></image>
            </view>
            <view class="message">
                <view class="sender">{{ sender }}</view>
                <view class="content">{{ content }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'ChatNotification',
    props: {
        visible: {
            type: Boolean,
            default: true
        },
        sender: {
            type: String,
            default: '系统消息'
        },
        content: {
            type: String,
            default: '您有一条新消息'
        },
        avatar: {
            type: String,
            default: '/static/logo.png'
        }
    },
    methods: {
        onClick() {
            // 通知被点击时触发事件
            this.$emit('click');
        }
    }
}
</script>

<style lang="scss">
.chat-notification {
    position: fixed;
    right: 20rpx;
    bottom: 120rpx;
    width: 400rpx;
    min-height: 120rpx;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 12rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.15);
    z-index: 999;
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    animation: slideInUp 0.3s ease-out;
    
    .notification-content {
        display: flex;
        flex-direction: row;
        
        .avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 40rpx;
            overflow: hidden;
            margin-right: 20rpx;
            
            image {
                width: 100%;
                height: 100%;
            }
        }
        
        .message {
            flex: 1;
            
            .sender {
                font-size: 28rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 6rpx;
            }
            
            .content {
                font-size: 26rpx;
                color: #666;
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
</style> 